I'm planning a US launch for my british site, most all text is the same but certain spellings and dates are slightly off. (color vs colour, canceled vs cancelled, apologize vs apologise)
I started using the i18n-next library for react but I have backend messages that are displayed to the user. What I'd like to do is just wrap the strings in t() and have those few words matched and replaced. Is i18n capable of doing that or should I just make a simple util function for that?
Ideally I could do it in i18n because I want to future proof it for when we expand to other markets.
Adding an answer here as I did some testing.
I create a const containing two words:
const string = 'foo bar';
using this I create an array out of it and map through each word like this:
{
string.split(' ').map((word) => (
t(`common:${word}`)
))
}
(As for the common:string part, that is just the setup in the existing project I tested it in, we are using different files for different components/routes/etc)
I have two separate language files:
One for sv-SE that does not contain keys with either "foo" or "bar".
A second one for en-US that contains the one of the words as key with translation
{ "foo": "weird", }
And if I set my language to sv-SE I still see "foobar" as my output (I did not care to take care of adding spaces after each word).
And if I switch to en-US I get the string "weirdbar" instead.
That should get you going (hopefully)
So the princible works, but I will assume that you will need to manage a bunch of edge cases. Or perhaps find some better way to do it.